<!DOCTYPE html>
<html>
<head>
	<title>uphgall demo. multi</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--CSS-->
	<link rel="stylesheet" type="text/css" href="../css/reset.min.css">
	<link rel="stylesheet" type="text/css" href="../css/prettify.css">
	<link rel="stylesheet" type="text/css" href="../css/gallery.css">
	<link rel="stylesheet" type="text/css" href="../css/uphgall.css">
	<style type="text/css">
		[class *= "gallery"]{
			background: #666;
			border: 2px dashed #aaa;
			display: inline-block;
		}
		.uphgallScroller,
		.uphgallScroller .canvas{
			width:	288px;
			height:192px;
		}
		.gallery3 .thumbs>li{
			display: inline-block;
			width: 150px;
			height: 150px;
		}
	</style>
	<!--JS-->
	<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../js/showpagecode.js"></script>
	<script type="text/javascript" src="../js/jquery.uphgall.min.js"></script>
	<script type="text/javascript" src="../js/prettify/prettify.js"></script>
	<!--uphgall initialization-->
	<script type="text/javascript">
		uphgall({
			User:		'105114498487014071079',
			Album:		'5745304712067832849',
			AuthKey:	'Gv1sRgCIqsnKvDxbbkuAE',
			ImgHeight:      200,
			ImgWidth:       288,
			GalleryId:	'.gallery1',
			AutoStart:	true
		})
		
		uphgall({
			Tag:		'moon',
			MaxResults:	5,
			GalleryId:	'.gallery2',
			AutoStart:	true,
			SlideShowTime:  2500
		})
		
		uphgall({
			Tag:		'sun',
			MaxResults:	5,
			GalleryId:	'.gallery3',
			ThumbsCapacity: 100
		})
	</script>
</head>
<body>
	<div class="wrap">
		<!--gallery1 HTML-->
		<div class="gallery1 uphgallScroller canvascenter">
			<div class="canvas">
				<img class="img">
				<div>
					<ul class="thumbs">
						<li></li>
					</ul>
					<span class="slideshow"></span>
				</div>
			</div>
		</div>
		<!--/gallery1 HTML-->
		
		<!--gallery2 HTML-->
		<div class="gallery2 uphgallScroller canvascenter">
			<div class="canvas">
				<img class="img">
				<div>
					<ul class="thumbs">
						<li></li>
					</ul>
					<span class="slideshow"></span>
				</div>
			</div>
		</div>
		<!--/gallery2 HTML-->
		<br>
		<!--gallery3 HTML-->
		<div class="gallery3">
			<ul class="thumbs">
				<li>
					<img class="img">
				</li>
			</ul>
		</div>
		<!--/gallery3 HTML-->
	</div>
</body>
</html>
